<div class="page-top clearfix" baScrollPosition maxHeight="50" (scrollChange)="scrolledChanged($event)" [ngClass]="{scrolled: isScrolled}">
    <a href="/#/dashboard" class="al-logo clearfix"><span>Ideabrew</span></a>
    <!--<a (click)="toggleMenu()" class="collapse-menu-link ion-navicon"></a>-->


    <div class="user-profile clearfix">
        <span style="padding: 0 5px;"><b>Hi</b> </span><a href="/#/profile"><span
            class="username">{{firstName}} {{lastName}}</span></a>
        <div class="dropdown al-user-profile" dropdown [dropdownToggle]="false">
            <a class="profile-toggle-link dropdown-toggle" id="user-profile-dd" dropdown-open aria-expanded="false">
                <img [src]="profilePicture">
            </a>
            <ul class="dropdown-menu top-dropdown-menu profile-dropdown" aria-labelledby="user-profile-dd">
                <li class="dropdown-item"><i class="dropdown-arr"></i></li>
                <li class="dropdown-item" (click)="redirectProfile()"><a class="signout"><i class="ion-person"></i>Profile</a>
                </li>

                <li class="dropdown-item"><a href class="signout" (click)="logoutSession()"><i
                        class="fa fa-power-off"></i>Sign out</a></li>
            </ul>
        </div>
    </div>
</div>